<script setup lang="ts">
import { useRouter, RouterView } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessageBox } from 'element-plus'
import { useThemeStore } from '@/stores/theme'

const router = useRouter()
const user = useUserStore()
user.hydrate()
const theme = useThemeStore()

const onLogout = async () => {
  const confirm = await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '退出',
    cancelButtonText: '取消',
    type: 'warning'
  }).catch(() => false)
  if (confirm) {
    user.logout()
    router.push({ name: 'Login' })
  }
}
</script>

<template>
  <el-container style="height:100vh">
    <el-aside width="220px" class="aside">
      <div class="brand">后台管理系统</div>
      <el-menu router default-active="/">
        <el-menu-item index="/">仪表盘</el-menu-item>
        <el-menu-item index="/articles">文章管理</el-menu-item>
        <el-menu-item v-if="user.role==='admin'" index="/users">用户管理</el-menu-item>
        <el-menu-item index="/profile">个人中心</el-menu-item>
        <el-menu-item index="/change-password">修改密码</el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="header">
        <div class="spacer"></div>
        <div class="userinfo">
          <el-switch
            v-model="theme.mode"
            active-value="dark"
            inactive-value="light"
            inline-prompt
            active-text="🌙"
            inactive-text="☀️"
            @change="(v:any)=>theme.set(v)"
          />
          <img v-if="user.avatar" :src="user.avatar" class="avatar" />
          <div class="name">{{ user.name }}（{{ user.role }}）</div>
          <el-button link @click="onLogout">退出</el-button>
        </div>
      </el-header>
      <el-main>
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.aside { border-right: 1px solid var(--el-border-color); }
.brand { padding: 16px; font-weight: 600; }
.header { display:flex; align-items:center; padding: 0 16px; border-bottom:1px solid var(--el-border-color); }
.spacer { flex:1; }
.userinfo { display:flex; align-items:center; gap:8px; }
.avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; }
</style>


